<template>
    <section class="jumbotron">
      <h3 class="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" placeholder="enter the name you search" v-model="keyWord" />&nbsp;
        <button @click="searchUsers">Search</button>
      </div>
    </section>
</template>

<script>
import axios from 'axios'
export default {
    name:'Search',
    data() {
        return {
            keyWord:''
        }
    },
    methods:{
        searchUsers(){
            this.$bus.$emit('updateUsers',{isFirst:false,isLoading:true,errMessage:'',users:[]})
            axios.get(`http://api.github.com/search/users?q=${this.keyWord}`).then(
                response =>{
                    // console.log('请求成功了',response.data.items);
                    this.$bus.$emit('updateUsers',{isLoading:false,errMessage:'',users:response.data.items})
                },
                error =>{
                    console.log('请求失败',error);
                    this.$bus.$emit('updateUsers',{isLoading:false,errMessageg:error,users:[]})
                }
            )
        }
    }
}
</script>

<style>

</style>